<template>
	<view>
		<view class="navbar" :style="{'background':background, 'height':navbarHeight + 'px'}">
			<view class="text" :style="{ 'height': capsuleHeight + 'px', 'top': capsuleTop + 'px' }">{{title}}</view>
			<view class="search" @click="search"
				:style="{'width': swidth+'px','height': capsuleHeight + 'px', 'top': capsuleTop + 'px' }">
				<uni-icons type="search" style="margin: 0 0 0 5px;" size="18px" />
			</view>
		</view>
		<view :style="{'margin-top':capsuleTop+capsuleHeight+'px'}">
			<u-scroll-list>
				<view class="scroll-list">
					<view class="scroll-list__line" v-for="(item, index) in menuArr" :key="index">
						<view class="scroll-list__line__item" v-for="(item1, index1) in item" :key="index1"
							:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']">
							<image class="scroll-list__line__item__image" :src="menuBaseUrl + item1.icon" mode="">
							</image>
							<text class="scroll-list__line__item__text">{{ item1.name }}</text>
						</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<view class="waterfall">
			<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
				:column-gap="columnGap" @changeList="changeList">
				<!-- 第一列数据 -->
				<template v-slot:list1>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
							<view class="waterfall-item__image" :style="[imageStyle(item)]">
								<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
							</view>
							<view class="waterfall-item__ft">
								<view class="waterfall-item__ft__title">
									<u--text :lines="2" :text="item.title" size="20" bold></u--text>
								</view>
								<view class="waterfall-item__ft__title">
									<text class="value2">￥{{item.price}}</text>
								</view>
								<view style="display:flex;text-align:center;color:#c2c2c2;margin: 5px;">
									<u--image shape="circle" :src="item.icon" width="30px" height="30px">
										<template v-slot:loading>
											<u-loading-icon color="red"></u-loading-icon>
										</template>
									</u--image>
									<text style="margin:0 0 0 5px;">{{item.nick_name}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
				<!-- 第二列数据 -->
				<template v-slot:list2>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
							<view class="waterfall-item__image" :style="[imageStyle(item)]">
								<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
							</view>
							<view class="waterfall-item__ft">
								<view class="waterfall-item__ft__title">
									<u--text :lines="2" :text="item.title" size="20" bold></u--text>
								</view>
								<view class="waterfall-item__ft__title">
									<text class="value2">￥{{item.price}}</text>
								</view>
								<view style="display:flex;text-align:center;color:#c2c2c2;margin: 5px;">
									<u--image shape="circle" :src="item.icon" width="30px" height="30px">
										<template v-slot:loading>
											<u-loading-icon color="red"></u-loading-icon>
										</template>
									</u--image>
									<text style="margin:0 0 0 5px;">{{item.nick_name}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</uv-waterfall>
		</view>
	</view>
	</view>
</template>

<script>
	import index from '../../uni_modules/uview-ui';
	import formItem from '../../uni_modules/uview-ui/libs/config/props/formItem';
	import {guid} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	export default {
		onHide() {
			this.$refs.waterfall.clear();
		},
		props: {
			title: {
				type: String,
				default: '小蚂蚁市场'
			},
			background: {
				type: String,
				default: 'linear-gradient(200deg, #ecf5ff, #fdf6ec);'
			},
			isShowArrow: {
				type: Boolean,
				default: true
			}
		},

		data() {
			return {
				capsuleTop: '', //胶囊距离屏幕顶部的距离
				capsuleHeight: '', //胶囊高度
				navbarHeight: '', //导航栏高度
				swidth: '',
				searchkeyword: "",
				menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
				menuArr: [
					[{
							name: '天猫新品',
							icon: '11.png'
						},
						{
							name: '今日爆款',
							icon: '9.png'
						}, {
							name: '天猫国际',
							icon: '17.png'
						}, {
							name: '饿了么',
							icon: '6.png'
						}, {
							name: '天猫超市',
							icon: '11.png'
						}, {
							name: '分类',
							icon: '2.png'
						}, {
							name: '天猫美食',
							icon: '3.png'
						}, {
							name: '阿里健康',
							icon: '12.png'
						}, {
							name: '口碑生活',
							icon: '7.png'
						}
					],
				],
				list: [], // 瀑布流全部数据
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				leftGap: 10,
				rightGap: 10,
				columnGap: 10,
				loadStatus: 'loadmore',
				page: 1,
				photosearch: []
			}
		},
		computed: {
			imageStyle(item) {
				return item => {
					const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
					const w = v / 2;
					const rate = w / item.w;
					const h = rate * item.h;
					return {
						width: w + 'px',
						height: h + 'px'
					}
				}
			}
		},
		async onLoad() {
			const {data} = await this.getData(this.page);
			this.list = data;
			/*#ifdef APP-PLUS*/
			// App端特有的逻辑
			console.log('Running on App-Plus');
			/*#endif*/

			/*#ifdef H5*/
			// 在浏览器端（H5）执行的逻辑
			console.log('Running on H5');
			this.capsuleTop = 0,
				this.capsuleHeight = 30,
				this.navbarHeight = 40,
				this.swidth = uni.getWindowInfo().windowWidth
			/*#endif*/

			/*#ifdef MP-WEIXIN*/
			// 微信小程序端执行的逻辑
			const w = uni.getMenuButtonBoundingClientRect().left;
			this.swidth = w - 90;
			console.log('Running on WeChat Mini Program');
			const App = getApp();
			this.capsuleTop = App.globalData.capsule.top,
				this.capsuleHeight = App.globalData.capsule.height,
				this.navbarHeight = (App.globalData.capsule.top - App.globalData.system.statusBarHeight) * 2 + App
				.globalData.capsule.height + App.globalData.system.statusBarHeight
			/*#endif*/
			// 获取应用实例
		},
		// 触底加载更多
		async onReachBottom() {
			if (this.loadStatus == 'loadmore') {
				this.loadStatus = 'loading';
				this.page++;
				const {data} = await this.getData(this.page);
				this.list.push.apply(this.list, data);
				this.loadStatus = 'loadmore';
			}
		},
		methods: {
			search() {
				uni.navigateTo({
					url: '/pages/SearchPage/SearchPage'
				});
			},
			img1(e) {
				uni.navigateTo({
					url: '/pages/ProductDetailsPage/ProductDetailsPage?item=' + encodeURIComponent(JSON.stringify(
						e))
				});
			},
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},
			// 模拟的后端数据
			getData(page) {
				const _this = this //不然this.拿不到
				var photosearch = []
				return new Promise((resolve) => {
					let list = [];
					uni.request({
						method: 'GET',
						url: getApp().globalData.url + '/good/seleall',
						data: {
							type: _this.type,
							page: page
						},
						success(res) {
							_this.qwe = res.data
							if(res.data.length>0){
								_this.qwe.map((item, index) => {
									photosearch.push(
										Object.assign({
											src: item.src
										}, {
											name: item.description
										}, {
											id: item.id
										}, {
											price: item.price
										}, {
											nickname: item.nickName
										}, {
											icon: item.icon
										})
									)
								})
								console.log(photosearch);
								const doFn = (i) => {
									const randomIndex = Math.floor(Math.random() * photosearch.length);
									return {
										id: guid(),
										allowEdit: i == 0,
										image: getApp().globalData.img_url + photosearch[randomIndex].src,
										w: photosearch[randomIndex].width,
										h: photosearch[randomIndex].height,
										title: photosearch[randomIndex].name,
										desc: photosearch[randomIndex].name,
										price: photosearch[randomIndex].price,
										nick_name: photosearch[randomIndex].nickname,
										icon: getApp().globalData.img_url +photosearch[randomIndex].icon
									}
								};
								// 模拟异步
								setTimeout(() => {
									for (let i = 0; i < 20; i++) {
										list.push(doFn(i));
									}
									resolve({
										data: list
									});
								}, 200)
							}else{
								_this.page=1
								uni.request({
									method: 'GET',
									url: getApp().globalData.url + '/good/seleall',
									data: {
										type: _this.type,
										page: _this.page
									},
									success(res) {
										_this.qwe = res.data
										_this.qwe.map((item, index) => {
											photosearch.push(
												Object.assign({
													src: item.src
												}, {
													name: item.description
												}, {
													id: item.id
												}, {
													price: item.price
												}, {
													nickname: item.nickName
												}, {
													icon: item.icon
												})
											)
										})
										console.log(photosearch);
										const doFn = (i) => {
											const randomIndex = Math.floor(Math.random() * 8);
											return {
												id: guid(),
												allowEdit: i == 0,
												image: getApp().globalData.img_url + photosearch[randomIndex].src,
												w: photosearch[randomIndex].width,
												h: photosearch[randomIndex].height,
												title: photosearch[randomIndex].name,
												desc: photosearch[randomIndex].name,
												price: photosearch[randomIndex].price,
												nick_name: photosearch[randomIndex].nickname,
												icon: getApp().globalData.img_url +photosearch[randomIndex].icon
											}
										};
										// 模拟异步
										setTimeout(() => {
											for (let i = 0; i < 20; i++) {
												list.push(doFn(i));
											}
											resolve({
												data: list
											});
										}, 200)
									}
								})
							}
						}
					})
				})
			}

		}
	}
</script>

<style>
	/* 其他样式 */
	.scroll-list__line {
		margin-top: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scroll-list__line__item {
		margin-right: 15px;
		text-align: center;

	}

	.scroll-list__line__item__image {
		width: 61px;
		height: 48px;
	}

	.scroll-list__line__item__text {
		margin-top: 5px;
		color: $u-content-color;
		font-size: 12px;
		text-align: center;
	}

	.navbar {
		/*#ifdef H5*/
		background-color: #53c21d;
		/*#endif*/
		display: flex;
		align-items: flex-end;
		width: 100%;
		/* 设置导航栏在顶部 */
		position: fixed;
		top: 0;
		z-index: 99;
	}

	.arrow-content {
		left: 40rpx;
		z-index: 999;
		display: flex;
		align-items: center;
	}

	.arrow {
		width: 20rpx;
		height: 20rpx;
		border: 5rpx solid #FFFFFF;
		border-right-color: transparent;
		border-bottom-color: transparent;
		transform: rotate(-45deg);
	}

	.text {
		font-weight: bold;
		margin: 0 0 5px 5px;
		/* position: absolute; */
		left: 0;
		right: 0;
		font-size: 28rpx;
		color: black;
		display: flex;
		align-items: center;
		/* justify-content: left; */
	}

	.search {
		display: flex;
		/* position: absolute; */
		margin: 0 0 5px 5px;
		align-items: center;
		border: 1px solid black;
		border-radius: 18px;
	}

	.page {
		background: #f1f1f1;
	}
</style>

<style scoped lang="scss">
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;
			.value {
				font-size: 32rpx;
				color: #303133;
			}

			.value2 {
				font-size: 32rpx;
				color: red;
			}
		}

		&__desc {
			.value {
				font-size: 28rpx;
				color: #606266;
			}
		}

		&__btn {
			padding: 10px 0;
		}
	}
</style>